<template>
    <div class="mine-header">
           <div class="header">
               <div class="head-portrait"></div>
               <router-link tag="div"  to="/mine/login" class="head-login">登陆/注册</router-link>
               <span class="iconfont set">&#xe636;</span>
               <span class="iconfont news">&#xe632;</span>
           </div>
           <van-panel>
              <ul>
                  <li v-for="item in list" :key="item.title">
                      <span class="iconfont header-icon" v-html="item.icons" v-bind:class="[item.icon1Class, item.icon2Class,item.icon3Class]"></span>
                      <span class="title">{{item.title}}</span>
                  </li>
             </ul>
           </van-panel>
    </div>
</template>

<script>



export default {
    name:'MineHeader',
    data (){
        return {
            list:[
                {
                  icons:'&#xe601;', 
                  title:'红包',                  
                  icon1Class:'icon1'
                },{
                  icons:'&#xe643;',  
                  title:'代金券',                 
                  icon2Class:'icon2'
                },{
                  icons:'&#xe649;', 
                  title:'我的钱包',                  
                  icon3Class:'icon3'
                }
            ]
        }
    }
}
</script>

<style scoped>
.header{
    height:60px;
    width:100%;
    position: relative;
    overflow:hidden;
}
.head-portrait{
    width:50px;
    height:50px;
    margin:5px 0 5px 5px;
    border-radius: 50%;
    border:1px solid blue;
}
.head-login{
    position: absolute;
    left:65px;
    top:20px;
    font-weight: bolder;
}
.header .set{
    font-size:38px;
    position: absolute;
    right:15%;
    top:50%;
    margin-top:-18px;

}
.header .news{
    font-size:22px;
    position: absolute;
    right:6%;
    top:50%;
    margin-top:-11px;

}

 ul{
     display:flex;
     justify-content: flex-start;
     width:100%;
     flex-wrap: wrap;
     box-sizing: border-box;
 }
 ul li{
     width:24%;
     display:flex;
     flex-direction: column; 
     text-align: center;
    
 }

.title{
    font-size:14px;
}
.icon1 {
    color:#FF6539;
    font-size:30px;
}
.icon2 {
    color:#FE9F33;
    background:#fff;
    font-size:30px;
}
.icon3{
     color:#FE9F33;
     font-size:30px;
}
</style>
